<template>
  <div class="flex items-center justify-between h-screen">
    <div class="w-[300px] bg-gray-200 h-full border-r border-gray-300">
      <div class="h-[90%] overflow-y-auto">
        <ConversationList :items="conversations" />
      </div>
      <div class="h-[10%] grid grid-cols-2 gap-2 p-2">
        <RouterLink to="/">
          <Button icon-name="radix-icons:chat-bubble" class="w-full">
            新建聊天
          </Button>
        </RouterLink>
        <RouterLink to="/settings">
          <Button icon-name="radix-icons:gear" plain class="w-full">
            应用配置
          </Button>
        </RouterLink>
      </div>
    </div>
    <div class="h-full flex-1 min-w-48">
      <RouterView />
    </div>
  </div>
</template>

<script setup lang="ts">
import Button from "./components/Button.vue";
import ConversationList from "./components/ConversationList.vue";

import { useConversationStore } from "./stores/conversation";

const conversationStore = useConversationStore();

const conversations = computed(() => conversationStore.items);

import { useProviderStore } from "./stores/provider";
const provdierStore = useProviderStore();

import { initProviders } from "./db";

import { useRouter } from "vue-router";

const router = useRouter();

// 监听菜单事件
window.electronAPI.onMenuNewConversation(() => {
  router.push("/");
});

window.electronAPI.onMenuOpenSettings(() => {
  router.push("/settings");
});

onMounted(async () => {
  await initProviders();
  // 加载本地存储的会话列表
  conversationStore.fetchConversations();
  provdierStore.fetchProviders();
});
</script>
